<!DOCTYPE html>
<!-- saved from url=(0046)https://qd.lianjia.com/ershoufang/rs%E4%BA%86/ -->
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-language" content="zh-CN">
    <meta name="format-detection" content="telephone=no">
    <meta name="applicable-device" content="pc">
    <meta name="location" content="province=山东;city=青岛;coord=36.07,120.33">
    <link href="/static/img/logo500x500.png" rel="shortcut icon" sizes="500x500">

    <title>房屋列表</title>


    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <link property="stylesheet" rel="stylesheet" href="/static/css/zhu.css">
</head>
<body>


<div th:replace="common/head.html::banner(${user})"></div>


<div>
    <div class="m-filter">
        <form action="houselist" method="post">
        <div class="list-more">
            <dl class="">
                <h2>
                    <dt>位置</dt>
                </h2>
                <dd>
                    <a href="#" class="" rel="nofollow" th:each="area:${areas}">
                        <input checked="checked" type="checkbox" th:id="${'area'+area.getId()}" name="area" th:value="${area.getArea()}">
                        <label class="mark" th:for="${'area'+area.getId()}" th:text="${area.getArea()}"></label>
                    </a>
                </dd>
            </dl>
            <dl class=" ">
                <h2>
                    <dt title="青岛房型在售二手房">付款方式</dt>
                </h2>
                <dd>
                    <a href="#" class="" rel="nofollow">
                        <input  required type="radio" name="paymethod" value="月付">
                        <span class="pay" id="pay1">月付</span>
                    </a>
                    <a href="#" class="" rel="nofollow">
                        <input type="radio" name="paymethod" value="季付">
                        <span class="pay" id="pay2">季付</span>
                    </a>
                    <a href="#" class="" rel="nofollow">
                        <input type="radio" name="paymethod" value="年付">
                        <span class="pay" id="pay3">年付</span>
                    </a>
                </dd>
            </dl>
            <dl class=" " >
                <h2>
                    <dt  >方式</dt>
                </h2>
                <dd>
                    <a href="#" class="" rel="nofollow">
                        <input required type="radio" name="type" value="整租">
                        <span class="name" id="type1" >整租</span>
                    </a>

                    <a href="#" class="" rel="nofollow">
                        <input type="radio" name="type" value="合租">
                        <span class="name"  id="type2">合租</span>
                    </a>

                </dd>
            </dl>
            <dl class=" " >
                <h2>
                    <dt >排序方式</dt>
                </h2>
                <dd>
                    <select name="sort">
                        <option value="asc">升序</option>
                        <option value="desc">降序</option>
                    </select>
            </dl>
            <dl>

                <dd>
                    <button type="submit" class="button">查询</button>
                </dd>
            </dl>

        </div>
        </form>
<div class="content " id="content">
    <ul th:each="house:${list}" class="sellListContent LOGCLICKDATA" log-mod="list_less" data-lj_view_evtid="11087"
        data-lj_action_type="list_zaishou">
        <li class="clear LOGCLICKDATA" data-lj_view_evtid="21625" data-lj_evtid="21624" data-lj_view_event="ItemExpo"
            data-lj_click_event="SearchClick"
            data-lj_action_click_position="0">
            <a class="noresultRecommend img LOGCLICKDATA" href="#"
               target="_blank" th:href="'/house/inf/'+${house.id}">
                <img class="lj-lazy"
                     th:src="${house.mainImage}"

                     alt="" style="display: block;"></a>
            <div class="info clear">
                <div class="title"><a class="LOGCLICKDATA " th:href="'/house/inf/'+${house.id}"
                                      target="_blank" th:text="${house.title}">

                </a></div>
                <div class="flood">
                    <div class="positionInfo"><span class="positionIcon"></span><a
                            href="#" target="_blank" data-log_index="1"
                            data-el="region" text="青岛市"> 青岛</a> - <a th:href="'/house/inf/'+${house.id}"
                                                              target="_blank" th:text="${house.getArea()}"></a></div>
                </div>
                <div class="address">
                    <div class="houseInfo"><span class="houseIcon" th:text="${house.getPayType()}"></span>
                    </div>
                </div>
                <div class="priceInfo">
                    <div class="totalPrice"><span th:text="${house.price}"></span>元/月</div>

                </div>
            </div>
            <div class="listButtonContainer">
                <div th:onclick="'look('+${house.id}+')'" class="btn-follow followBtn" data-hid="103108904982"><span class="follow-text">关注</span></div>
            </div>
        </li>
    </ul>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    function look(houseId) {
        $.ajax({
            url:'/house/house/look',
            type:'POST',
            dataType:'json',
            data:{id:houseId},
            success:function(data){
                //请求成功后执行的代码
                if (data.code==200){
                    alert("关注成功");
                }else {
                    window.location.href="/login";
                }
            },
            error:function(status){
                //失败后执行的代码
            }
        });

    }
</script>
<script>
    var jsonData;
    var payid='';
    var areaid='';
    var typeid='';
    function payF(obj) {
        alert(obj.innerHTML);
        if (payid!=''){
            document.getElementById(payid).style.color='black';
        }
        payid=obj.id;
        alert(payid)
        send()
        obj.style.color="blue";

    }
    function areaF(obj) {
        alert(obj.innerHTML);
        if (areaid!=''){
            document.getElementById(areaid).style.color='black';
        }
        areaid=obj.id;
        alert(areaid)
        send()
        obj.style.color="blue";

    }
    function typeF(obj) {
        alert(obj.innerHTML);
        if (typeid!=''){
            document.getElementById(typeid).style.color='black';
        }
        typeid=obj.id;
        alert(typeid)
        send()
        obj.style.color="blue";

    }


    function send() {
        var payData='';
        var areaData='';
        var typeData='';
        if (payid!=''){
            pay=document.getElementById(payid);
            payData=pay.innerHTML;
        }
        if (areaid!=''){
            area=document.getElementById(areaid);
            areaData=area.innerHTML;
        }
        if (typeid!=''){
            type=document.getElementById(typeid);
            typeData=type.innerHTML;
        }
        $.ajax({
            url:'/house/findbypay',
            type:'POST',
            dataType:'json',
            data:{pay:payData,type:typeData,area:areaData},
            success:function(response){
                //请求成功后执行的代码
                alert(response.data)
                writeToHtml(response.data)
            },
            error:function(status){
                //失败后执行的代码
            }
        });
    }

    function writeToHtml(json) {
        alert(json.length)
        document.getElementById("lenthresult").innerHTML=json.length;
        resultHtml='';
        for (var i=0;i<json.length;i++){
            // alert(json[i].title)
            resultHtml=resultHtml+'<ul  class="sellListContent LOGCLICKDATA" log-mod="list_less" data-lj_view_evtid="11087"\n' +
                '        data-lj_action_type="list_zaishou">\n' +
                '        <li class="clear LOGCLICKDATA" data-lj_view_evtid="21625" data-lj_evtid="21624" data-lj_view_event="ItemExpo"\n' +
                '            data-lj_click_event="SearchClick"\n' +
                '            data-lj_action_click_position="0">\n' +
                '            <a class="noresultRecommend img LOGCLICKDATA" href="#"\n' +
                '               target="_blank" data-log_index="1" data-lj_view_evtid="11086"\n' +
                '               data-lj_evtid="11085" data-lj_action_location="0"\n' +
                '               data-lj_action_housedel_id="103108904982"\n' +
                '               data-lj_action_type="list_zaishou" data-sl="">\n' +
                '                <!-- 热推标签、埋点 -->\n' +
                '                <img class="lj-lazy"\n' +
                '                     src="'+json[i].mainImage+'"\n' +
                '                     data-original="https://image1.ljcdn.com/110000-inspection/pc1_UO1LhhTj7_1.jpg.296x216.jpg"\n' +
                '                     alt="" style="display: block;"></a>\n' +
                '            <div class="info clear">\n' +
                '                <div class="title"><a class="LOGCLICKDATA " href="/house/inf/'+json[i].id+'"\n' +
                '                                      target="_blank" data-log_index="1" data-lj_view_evtid="11086"\n' +
                '                                      data-lj_evtid="11085" data-lj_action_location="0"\n' +
                '                                      data-lj_action_housedel_id="103108904982" data-lj_action_type="list_zaishou"\n' +
                '                                      data-sl="" text="'+json[i].title+'">'+json[i].title+'\n' +
                '\n' +
                '                </a><!-- 拆分标签 只留一个优先级最高的标签--></div>\n' +
                '                <div class="flood">\n' +
                '                    <div class="positionInfo"><span class="positionIcon"></span><a\n' +
                '                            href="#" target="_blank" data-log_index="1"\n' +
                '                            data-el="region" >青岛</a> - <a href="#"\n' +
                '                                                              target="_blank" >'+json[i].area+'</a></div>\n' +
                '                </div>\n' +
                '                <div class="address">\n' +
                '                    <div class="houseInfo"><span class="houseIcon" th:text="${house.getPayType()}"></span>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '\n' +
                '                <div class="tag"><span class="vr" th:text="${house.tag}">VR房源</span><span class="taxfree">房本满五年</span><span\n' +
                '                        class="haskey">随时看房</span></div>\n' +
                '                <div class="priceInfo">\n' +
                '                    <div class="totalPrice"><span >'+json[i].price+'</span>元/月</div>\n' +
                '\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="listButtonContainer">\n' +
                '                <div onclick="look()" class="btn-follow followBtn" data-hid="103108904982"><span class="follow-text">关注</span></div>\n' +
                '            </div>\n' +
                '        </li>\n' +
                '    </ul>'
        }

        document.getElementById('result').innerHTML=resultHtml;
    }
</script>
</body>
</html>